<!-- 统计分析 - 数据目录 -->
<script>
import { defineComponent } from 'vue';
import GlobalCard from '@/components/GlobalCard/global-card.vue';
import iconHushu from '@/components/LayerTree/images/icon-户数.svg';
import iconMianji from '@/components/LayerTree/images/icon-面积.svg';
import Api from "@/api";
import {forEach} from "lodash";
let MyChart = null;
let resetHushuArea = () => { }
function EchartsRenderArea(cateData, mainTotal) {
  mainTotal = Number(Number(mainTotal).toFixed(0));
  MyChart = echarts.init(document.getElementById('Gongretongji'));
  let color = ['rgba(47, 141, 244, 1)', 'rgba(21, 219, 193, 1)', 'rgba(150, 150, 150, 1)']
  let option = {
    color: color,
    title: {
      left: 'center',
      top: '50%',
      textStyle: {
        fontSize: 16,
        color: '#fff',
        fontWeight: 'normal'
      }
    },
    tooltip: {
      trigger: 'item',
      formatter: function (param) {
        const result = param.marker + param.name + ' : ' + param.value + ' ' + 'm²<br/>';
        return result;
      },
      textStyle: {
        fontFamily: 'ALIBABAPUHUI-REGU'
      }
    },
    legend: {
      left: 20,
      top: 10,
      itemWidth: 13,
      itemHeight: 8,
      borderRadius: 0,
      icon: 'rect',
      itemStyle: {
        borderColor: '#fff',
        borderWidth: 1,
      },
      textStyle: {
        color: '#fff',
        fontSize: '14',
        fontFamily: 'ALIBABAPUHUI-REGU'
      }
    },
    series: [{
      type: 'pie',
      // roseType: 'radius',
      radius: ['30%', '50%'],
      data: cateData,
      label: {
        normal: {
          formatter: '{font|{c}}\n{hr|}\n{font|{d}%}',
          rich: {
            font: {
              fontSize: 12,
              padding: [5, 0],
              color: '#fff'
            },
            hr: {
              height: 0,
              borderWidth: 1,
              width: '100%',
              borderColor: '#fff'
            }
          }
        },
      },
      labelLine: {
        lineStyle: {
          color: '#fff'
        }
      },
      emphasis: {
        itemStyle: {
          borderColor: '#fff', // 边框颜色
          borderWidth: 2,        // 边框宽度
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0,0,0,0.5)'
        }
      }
    }],
    graphic: [
      {
        type: 'text',
        left: 'center',
        bottom: '40%',
        style: {
          fontFamily: 'alimamashuheiti',
          text: '总计(m²)', // 要显示的数字
          textAlign: 'center',
          fill: '#fff', // 文字颜色
          fontSize: 16,
          lineHeight: 20,
        }
      },
      {
        type: 'text',
        left: 'center',
        bottom: '50%',
        z: 10,
        style: {
          fontFamily: 'alimamashuheiti',
          text: mainTotal, // 要显示的数字
          textAlign: 'center',
          fill: '#fff', // 文字颜色
          fontSize: 20,
          lineHeight: 20,
        }
      }
    ]
  };
  MyChart.setOption(option);
  MyChart.on('legendselectchanged', function (params) {
    const selected = params.selected;
    let mainTotal = 0;
    cateData.forEach(v => {
      if(selected[v.name]) {
        mainTotal = mainTotal + v.value
      }
    })
    mainTotal = Number(Number(mainTotal).toFixed(0))
    option.graphic[1].style.text = mainTotal;
    MyChart.setOption(option);
  })
}
function EchartsRenderHushu(cateData, mainTotal) {
  mainTotal = Number(Number(mainTotal).toFixed(0));
  MyChart = echarts.init(document.getElementById('Gongretongji'));
  let color = ['rgba(47, 141, 244, 1)', 'rgba(21, 219, 193, 1)', 'rgba(150, 150, 150, 1)']
  let option = {
    color: color,
    title: {
      left: 'center',
      top: '50%',
      textStyle: {
        fontSize: 16,
        color: '#fff',
        fontWeight: 'normal'
      }
    },
    tooltip: {
      trigger: 'item',
      formatter: function (param) {
        const result = param.marker + param.name + ' : ' + param.value + ' ' + '户<br/>';
        return result;
      },
      textStyle: {
        fontFamily: 'ALIBABAPUHUI-REGU'
      }
    },
    legend: {
      left: 20,
      top: 10,
      itemWidth: 13,
      itemHeight: 8,
      borderRadius: 0,
      icon: 'rect',
      itemStyle: {
        borderColor: '#fff',
        borderWidth: 1,
      },
      textStyle: {
        color: '#fff',
        fontSize: '14',
        fontFamily: 'ALIBABAPUHUI-REGU'
      }
    },
    series: [{
      type: 'pie',
      // roseType: 'radius',
      radius: ['30%', '50%'],
      data: cateData,
      label: {
        normal: {
          formatter: '{font|{c}}\n{hr|}\n{font|{d}%}',
          rich: {
            font: {
              fontSize: 12,
              padding: [5, 0],
              color: '#fff'
            },
            hr: {
              height: 0,
              borderWidth: 1,
              width: '100%',
              borderColor: '#fff'
            }
          }
        },
      },
      labelLine: {
        lineStyle: {
          color: '#fff'
        }
      },
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0,0,0,0.5)'
        }
      }
    }],
    graphic: [
      {
        type: 'text',
        left: 'center',
        bottom: '40%',
        style: {
          fontFamily: 'alimamashuheiti',
          text: '总计(户)', // 要显示的数字
          textAlign: 'center',
          fill: '#fff', // 文字颜色
          fontSize: 16,
          lineHeight: 20,
        }
      },
      {
        type: 'text',
        left: 'center',
        bottom: '50%',
        z: 10,
        style: {
          fontFamily: 'alimamashuheiti',
          text: mainTotal, // 要显示的数字
          textAlign: 'center',
          fill: '#fff', // 文字颜色
          fontSize: 20,
          lineHeight: 20,
        }
      }
    ]
  };
  MyChart.setOption(option);
  MyChart.on('legendselectchanged', function (params) {
    const selected = params.selected;
    let mainTotal = 0;
    cateData.forEach(v => {
      if(selected[v.name]) {
        mainTotal = mainTotal + v.value
      }
    })
    mainTotal = Number(Number(mainTotal).toFixed(0))
    option.graphic[1].style.text = mainTotal;
    MyChart.setOption(option);
  })
}
export default defineComponent({
  name: "SectionFive",
  components: {
    GlobalCard,
  },
  setup() {
  },
  data() {
    return {
      // 记录当前应该查询的数据的情况，比如该数据是在查供热企业？热源？换热站？供热范围？
      recordData: {
        // all 全部
        // part 分部
        dataType: 'all',
        // enterprise 企业
        // heat-source 热源
        // heat-huanre 换热站
        // heat-fanwei 供热范围
        type: 'enterprise',
        // 携带的数据
        data: null
      },
      iconHushu: iconHushu,
      iconMianji: iconMianji,
      data_5: 0,
      data_6: 0,

      activeId: 'count',
      listData: [{
        name: '供热面积',
        id: 'area'
      }, {
        name: '供热户数',
        id: 'count'
      }]
    }
  },
  mounted() {
    setTimeout(() => {
      this.setSelect(this.activeId);
      this.initOrigin();
    }, 30)

    // 重置户数数据 面积数据 重要
    resetHushuArea = ({ data, type, dataType }) => {
      this.recordData.type = type;
      // 需要查全部数据还是部分数据
      // all 全部数据
      // part 部分数据
      this.recordData.dataType = dataType;
      // 携带的数据
      this.recordData.data = data;

      this.setSelect(this.activeId);
    }
    this.$MITT_BUS.on('reset-hushu-area', resetHushuArea)
  },
  unmounted() {
    this.$MITT_BUS.off('reset-hushu-area', resetHushuArea)
    resetHushuArea = () => { }
  },
  watch: {
  },
  computed: {
  },
  beforeRouteLeave() { },
  methods: {
    // 初始化计数 面积 户数
    initOrigin() {
      //   户数与面积的计数需要根据 供热数据总览的的面板联动 显示
      //   当面板显示供热企业或者供热范围的时候显示全部数据
      //   当面板显示热源或者换热站的时候显示过滤之后的数据
      //   供热户数 需要求和
      //   供热居民户数
      let p1 = Api.getDataOfHRZAnalize({
        fieldName: 'grjmhs'
      });
      // 服务非居民户数
      let p2 = Api.getDataOfHRZAnalize({
        fieldName: 'fwfjmhs'
      });
      Promise.all([p1, p2]).then(res => {
        this.data_5 = Number(Number(res.reduce((a, b) => { return a + b }, 0)).toFixed(0))
      })
      //   供热面积 需要求和
      //   居民供热面积 需要求和
      let p3 = Api.getDataOfHRZAnalize({
        fieldName: 'jmgrmj'
      });
      //   服务非居民供热面积
      let p4 = Api.getDataOfHRZAnalize({
        fieldName: 'fwfjmgrmj'
      });
      Promise.all([p3, p4]).then(res => {
        this.data_6 = Number(Number(res.reduce((a, b) => { return a + b }, 0)).toFixed(0))
      })
    },

    // 初始化面积 全部
    initAreaOrigin() {
      Api.getDataOfHRZ({
        ids: [],
        fields: ['JMGRMJ', 'FWFJMGRMJ', 'SFZG']
      }).then(res => {
        const obj = {
          '居民供热': 0,
          '非居民供热': 0
        }
        res.features.forEach(v => {
          const pro = v.properties;
          if (pro.SFZG === '否') {
            obj['居民供热'] = obj['居民供热'] + Number(pro.JMGRMJ) + Number(pro.FWFJMGRMJ)
          }
          if (pro.SFZG === '是') {
            obj['非居民供热'] = obj['非居民供热'] + Number(pro.JMGRMJ) + Number(pro.FWFJMGRMJ)
          }
        })
        const cateData = []
        let mainTotal = 0
        Object.keys(obj).forEach(v => {
          obj[v] = Number(obj[v].toFixed(2))
          cateData.push({
            value: obj[v],
            name: v
          });
          mainTotal += obj[v]
        })
        mainTotal = Number(Number(mainTotal).toFixed(0))
        EchartsRenderArea(cateData, parseInt(mainTotal))
      })
    },
    // 初始化户数计数 全部
    initHushuOrigin() {
      Api.getDataOfHRZ({
        ids: [],
        fields: ['FWFJMHS', 'SFZG', 'GRJMHS']
      }).then(res => {
        const obj = {
          '居民供热': 0,
          '非居民供热': 0
        }
        res.features.forEach(v => {
          const pro = v.properties;
          if (pro.SFZG === '否') {
            obj['居民供热'] = obj['居民供热'] + Number(pro.GRJMHS) + Number(pro.FWFJMHS)
          }
          if (pro.SFZG === '是') {
            obj['非居民供热'] = obj['非居民供热'] + Number(pro.GRJMHS) + Number(pro.FWFJMHS)
          }
        })
        const cateData = []
        let mainTotal = 0
        Object.keys(obj).forEach(v => {
          obj[v] = Number(obj[v].toFixed(2))
          cateData.push({
            value: obj[v],
            name: v
          });
          mainTotal += obj[v]
        })
        mainTotal = Number(Number(mainTotal).toFixed(0))
        EchartsRenderHushu(cateData, mainTotal)
      })
    },

    // init 接收来自换热站的 id 数据
    initAreaOriginFilter({ attributeFilter, renderInEchart }) {
      Api.getDataOfHRZ({
        ids: [],
        fields: ['JMGRMJ', 'FWFJMGRMJ', 'SFZG'],
        attributeFilter: attributeFilter
      }).then(res => {
        const obj = {
          '居民供热': 0,
          '非居民供热': 0
        }
        res.features.forEach(v => {
          const pro = v.properties;
          if (pro.SFZG === '否') {
            obj['居民供热'] = obj['居民供热'] + Number(pro.JMGRMJ) + Number(pro.FWFJMGRMJ)
          }
          if (pro.SFZG === '是') {
            obj['非居民供热'] = obj['非居民供热'] + Number(pro.JMGRMJ) + Number(pro.FWFJMGRMJ)
          }
        })
        const cateData = []
        let mainTotal = 0
        Object.keys(obj).forEach(v => {
          obj[v] = Number(obj[v].toFixed(2))
          cateData.push({
            value: obj[v],
            name: v
          });
          mainTotal += obj[v]
        })
        Number(Number(mainTotal).toFixed(0))
        this.data_6 = mainTotal;
        if (renderInEchart) {
          EchartsRenderArea(cateData, mainTotal)
        }
      })
    },
    // hushu
    initHushuOriginFilter({ attributeFilter, renderInEchart }) {
      Api.getDataOfHRZ({
        ids: [],
        fields: ['FWFJMHS', 'SFZG', 'GRJMHS'],
        attributeFilter: attributeFilter
      }).then(res => {
        const obj = {
          '居民供热': 0,
          '非居民供热': 0
        }
        res.features.forEach(v => {
          const pro = v.properties;
          if (pro.SFZG === '否') {
            obj['居民供热'] = obj['居民供热'] + Number(pro.GRJMHS) + Number(pro.FWFJMHS)
          }
          if (pro.SFZG === '是') {
            obj['非居民供热'] = obj['非居民供热'] + Number(pro.GRJMHS) + Number(pro.FWFJMHS)
          }
        })
        const cateData = []
        let mainTotal = 0
        Object.keys(obj).forEach(v => {
          obj[v] = Number(obj[v].toFixed(2))
          cateData.push({
            value: obj[v],
            name: v
          });
          mainTotal += obj[v]
        })
        mainTotal = Number(Number(mainTotal).toFixed(0))
        this.data_5 = mainTotal;
        if (renderInEchart) {
          EchartsRenderHushu(cateData, mainTotal)
        }
      })
    },
    setSelect(e) {
      if (MyChart) {
        MyChart.dispose();
      }
      // 全部数据
      if (this.recordData.dataType === 'all') {
        this.initOrigin();
        if (e === 'area') {
          this.activeId = 'area'
          this.initAreaOrigin();
        } else {
          this.activeId = 'count'
          this.initHushuOrigin();
        }
      } else {
        // 分部数据
        // 换热
        let attributeFilter = ''
        let arr = [];
        if (this.recordData.type === 'heat-huanre' || this.recordData.type === 'heat-fanwei') {
          this.recordData.data.forEach(v => {
            arr.push('HRZBM=' + '\'' + v + '\'')
          })
          attributeFilter = arr.join(' OR ');
        }

        // 热源
        if (this.recordData.type === 'heat-source') {
          this.recordData.data.forEach(v => {
            arr.push('GRZZJBM=' + '\'' + v + '\'')
          })
          attributeFilter = arr.join(' OR ');
        }

        if (this.recordData.type === 'enterprise') {
          this.recordData.data.forEach(v => {
            arr.push('DWMC=' + '\'' + v + '\'')
          })
          attributeFilter = arr.join(' OR ');
        }
        if (e === 'area') {
          this.activeId = 'area'
          this.initAreaOriginFilter({
            attributeFilter: attributeFilter,
            renderInEchart: true
          })
          this.initHushuOriginFilter({
            attributeFilter: attributeFilter,
            renderInEchart: false
          })
        } else {
          this.activeId = 'count'
          this.initAreaOriginFilter({
            attributeFilter: attributeFilter,
            renderInEchart: false
          })
          this.initHushuOriginFilter({
            attributeFilter: attributeFilter,
            renderInEchart: true
          })
        }
      }
    }
  }
});
</script>
<template>
  <div class="section-five">
    <GlobalCard :mainTitle="'供热统计'" @change="(e) => { setSelect(e) }">
      <template #body>
        <div id="Gongreshujuzonglan">
          <div class="inner">

            <div class="item dou data-5 cursor-pointer" :class="[
              activeId === 'count' ? 'active' : ''
            ]" @click="setSelect('count')">
              <div class="name font-HONGMENG-SC">
                <img class="icon" :src="iconHushu" />
                <span>供热户数</span>
              </div>
              <div class="numb">
                <span class="data small-size data-3 font-YouSheBiaoTiHei">
                  <count-to :startVal="0" :endVal="data_5" :duration="1000" :autoplay="true" />
                </span>
                <span class="unit "> 户</span>
              </div>
            </div>

            <div class="item dou data-6 cursor-pointer" :class="[
              activeId === 'area' ? 'active' : ''
            ]" @click="setSelect('area')">
              <div class="name font-HONGMENG-SC">
                <img class="icon" :src="iconMianji" />
                <span>供热面积</span>
              </div>
              <div class="numb">
                <span class="data small-size data-3 font-YouSheBiaoTiHei">
                  <count-to :startVal="0" :endVal="data_6" :duration="1000" :autoplay="true" />
                </span>
                <span class="unit "> m²</span>
              </div>
            </div>
          </div>
          <div class="mask" />
        </div>
        <!-- 代码 -->
        <div id="Gongretongji" v-loading="true">

        </div>
      </template>
    </GlobalCard>
  </div>
</template>
<style scoped lang="less">
.section-five {
  position: fixed;
  top: 11rem;
  right: 44rem;
}

#Gongretongji {
  width: 100%;
  height: 33rem;
}

#Gongreshujuzonglan {
  position: relative;

  &>.inner {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;

    &>.item {
      font-size: 1rem;
      text-align: center;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      background-image: url(./images/item-bg.svg);
      background-repeat: no-repeat;
      background-color: rgba(30, 100, 190, .3);
      transition: all .3s;
      margin-bottom: .2rem;
      height: 7rem;

      &.tri {
        width: 33%;
      }

      &.dou {
        width: 49.5%;
      }

      &.active,
      &:hover {
        background-color: rgba(30, 100, 190, .5);
      }

      &>.numb {
        margin-top: .5rem;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        height: 3rem;

        &>span.data {
          font-size: 2.5rem;
          font-weight: bolder;

          &.small-size {
            //font-size: 1.5rem;
          }

          &.data-2 {
            color: #ff8d0e;
          }

          &.data-3 {
            color: #40f148;
          }

          &.data-33 {
            color: #f4ea2a;
          }
        }

        &>span.unit {
          margin-top: 3px;
          margin-left: .5rem;
          font-size: 1.5rem;
        }
      }

      &>.name {
        margin-top: .5rem;
        font-size: 1.5rem;
        line-height: 2rem;
        font-family: "alimamashuheiti" !important;
        display: flex;
        align-items: center;

        &>.icon {
          width: 2rem;
          height: 2rem;
        }

        &>span {
          margin-left: .5rem;
        }
      }
    }
  }
}
</style>